<template>
  <el-card class="box-card231">
    <template #header>
      <div style="display: flex; align-items: center" class="card-header">
        <el-icon color="rgb(34, 171, 249)"><Document /></el-icon>
        &nbsp;
        <span style="color: rgb(34, 171, 249)">部室文件</span>

        <el-input
          v-if="false"
          clearable
          v-model="input_str"
          size="small"
          style="width: 30%; margin-left: 171px"
          placeholder="请输入文档名称"
        ></el-input>
      </div>
    </template>
    <vueJSX
    
      :data="treeData"
      :height="300"
    ></vueJSX>
    
  </el-card>
</template>

<script setup>
import vueJSX from "./vueJSX.vue";
import { Document } from "@element-plus/icons-vue";
import { onMounted, ref, watch } from "vue";

import { DownloadDepartmentFile } from "../../../api/projectManage/projectList";
import Files from "../../../utils/checkFile";
import { GetDepartmentFiles, GetDirectories,GetDirectory } from "../../../api/project";
let input_str = ref("");
let tableData = ref([]);
let treeData = ref([{ DirAttVOList: [] }]);

// 获取树的数据
let getTreeTableData = async () => {
  let path = await GetDirectory({directoryType:'部室文件'})
  let res = await GetDirectories({
    rootPath: path.data,
  });

  treeData.value = res;
};

// 获取部室文件
let getTableData = async (data) => {
  let res = await GetDepartmentFiles(data);
  tableData.value = res;
};

// 初始化的时候获取一次数据
onMounted(() => {
  getTreeTableData();
});


// 前端的搜索逻辑
watch(input_str, async () => {
  if (input_str.value) {
    let res = await GetDepartmentFiles();
    let data = JSON.parse(JSON.stringify(res));
    tableData.value = data.filter((v) => v.file_name.includes(input_str.value));
  } else {
    getTableData({ file_type: "部室文件" });
  }
});


</script>

<style scoped lang="scss">
.hober {
  cursor: pointer;
}
.hober:hover {
  color: rgb(34, 171, 249);
  text-decoration: underline;
}

.card-header {
  display: flex;
  align-items: center;
  font-size: 17px;
  span {
    // background-color: aqua;

    border-radius: 4px;

    font-weight: 600;
  }
}

.project-info {
  display: flex;
  font-size: 14px;

  flex-direction: column;
  .project-info-item {
    margin-bottom: 10px;
  }
}

.box-card231 {
  width: 100%;
  ::v-deep(.el-card__body) {
    padding: 5px;
  }
}
</style>
